const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: __dirname + '/src/main.js', // 要处理的文件入口
  output: { // 处理完后生成的文件地址
    path:  path.resolve(__dirname, 'dist'), // 打包文件后的输出地址，path.resolve 将地址拼接为绝对地址
    // publicPath: '/', // 静态资源地址，一般默认 '/'
    filename: 'bundle.js', // 定义打包后文件名
  },
  devServer: {
    host: 'localhost',
    port: 9090,
    // open: true,
    proxy: {
      '/api/': {
        target: 'http://172.16.0.30:8080',
        secure: false,
        pathRewrite: {
          "^/api/": ''
        }
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') // @ 代表了 src 所在目录
    },
    extensions: ['.js', '.json', '.vue'] // 这些文件的后缀可以不写
  },
  mode: 'development', // 开发模式，其他值 none，production，这个值可以通过 process.env.NODE_ENV 的值判断当前环境
  module: { // 处理各种模块
		rules: [ // 处理规则
      {
        test: /\.(less|css)$/, // 要处理的文件
        use: ['style-loader', 'css-loader', 'less-loader', 'postcss-loader'], // 通过哪些 loader 处理匹配的文件
        // 注意：use 使用是从右往左调用，这里必须按照这个顺序
        include: path.resolve(__dirname, 'src') // 只处理这个目录下的文件
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除某个文件夹
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      },
      {
      test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                preserveWhitespace: false // 如果为 true，则编译好的函数会保留标签之间的空格
              }
            }
          }
        ]
      },
      {
        enforce: 'pre', // 在所有loader之前处理
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(jpe?g|png|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 11264, // 当文件小于 5kb 时直接转为 base64编码
              esModule: false,
              name: 'images/[name].[hash:4].[ext]' // 大于 5kb 由 file-loader 处理成路径
            }
          }
        ]
    }
    ]
  },
  plugins: [ // 插件
    new HtmlPlugin({
      // title: 'webpack-demo'
      template: path.resolve(__dirname, 'public/index.html'), // 指定HTML模板
      filename: path.resolve(__dirname, 'dist/index.html') // 生成文件位置
    }),
    new VueLoaderPlugin()
  ]
}